<template>
     <div class="main-container">
          <Upload></Upload>
          <TableBody>
               <template #tableConfig>
                    <TableConfig v-model:border="tableConfig.border" v-model:stripe="tableConfig.stripe" @refresh="doRefresh">
                         <template #actions>
                              <el-button type="primary" size="small" icon="PlusIcon" @click="onAddItem">添加</el-button>
                         </template>
                    </TableConfig>
               </template>	
               <template #default>

                    <div style="border:1px solid #f5f5f5;">
                         <div style="padding: 25px;height: 720px;overflow-y: auto;">
                              <div v-for="(item, index) in dataList" :key="index">
                                   <span style="font-weight: 700;font-size: 18px;">
                                        标题: {{ item.title }}
                                   </span>
                                   <div class="scroll-container" style="width: 100%; word-break: break-all; white-space: pre-wrap; margin-top: 10px; font-size: 15px; max-height: 550px; text-overflow: ellipsis;">
                                        <p>内容：</p>
                                        <p style="display: inline-block; margin-left: 3em;font-size:large">
                                             {{ item.content }}
                                        </p>
                                   </div>
                                   <el-divider />	
                              </div>
                         </div>
                    </div>
               </template>
               <template #footer>
                    <TableFooter ref="interview" @refresh="doRefresh" @pageChanged="doRefresh" />
               </template>
          </TableBody>
          <Dialog ref="dialog" :title="dialogTitle">
               <template #content>
                    <div style="padding: 10px;">
                         <div style=" display: flex;align-items: center;padding: 5px 0;">
                              <div style="margin: 0 10px;width: 50px;"><span>标题 </span></div>
                              <el-input style=" width: 100%;" v-model="titleVal" />
                         </div>
                         <div style="display: flex;align-items: center;padding: 5px 0;">
                              <div style="margin: 0 10px;width: 50px;"><span>内容 </span></div>
                              <textarea v-model="contentVal" style="resize:both; width: 100%; height: 500px; white-space: pre-wrap; word-wrap: break-word;"></textarea>
                         </div>
                    </div>
               </template>
          </Dialog>
     </div>
</template>

<script lang="ts" setup>
import Upload from './upload.vue'
import { post } from '@/api/http'
import { getInterview, InterviewTable } from '@/api/url'
import type { BaseFormType, DialogType, TableFooter } from '@/components/types'
import { computed, h, onMounted, reactive, ref, watch } from 'vue'
import { ElInput, ElMessage, ElMessageBox, ElScrollbar } from 'element-plus'
import { useDataTable } from '@/hooks'
import { FormRenderItem } from '@/components/common/FormRender'
const DP_CODE_FLAG = 'dp_code_'
const interview = ref<TableFooter>()


const tableColumns = reactive([
	{
		label: '部门名称',
		prop: 'name'
	},
	{
		label: '部门编号',
		prop: 'depCode'
	},
	{
		label: '操作',
		prop: 'actions'
	}
])

const contentVal = ref('')
const titleVal = ref('')
const dataList = ref<any>([])
const dialog = ref<DialogType>()
const baseForm = ref()
const dialogTitle = ref('添加部门')
const { tableConfig, tableLoading, handleSuccess } = useDataTable<DepartmentModelType>()
const parentFormItem = reactive({
	label: '上级部门',
	name: 'parentId',
	value: 0,
	placeholder: '请选择上级部门',
	selectOptions: {},
	reset() {
		this.value = 0
	}
})

const depCodeFormItem: FormRenderItem = {
	label: '部门编号',
	type: 'input',
	name: 'depCode',
	value: '',
	maxLength: 10,
	disabled: false,
	inputType: 'text',
	placeholder: '请输入部门编号',
	validator: (item: any) => {
		if (!item.value) {
			ElMessage.error(item.placeholder)
			return false
		}
		return true
	},
	reset() {
		this.value = ''
		this.disabled = false
	},
	render: formItem => {
		return h(
			ElInput,
			{
				modelValue: formItem.value,
				'onUpdate:modelValue': newVal => {
					formItem.value = newVal
				},
				placeholder: formItem.placeholder
			},
			{
				prepend: () => {
					return h('span', DP_CODE_FLAG)
				}
			}
		)
	}
}
const formItems = reactive<FormItem[]>([
	{
		label: '部门名称',
		type: 'input',
		name: 'name',
		value: ref(''),
		maxLength: 50,
		inputType: 'text',
		placeholder: '请输入部门名称',
		validator: (item: any) => {
			if (!item.value) {
				ElMessage.error(item.placeholder)
				return false
			}
			return true
		},
		reset() {
			this.value = ''
		}
	},
	depCodeFormItem
])
const onUpdateItem = (item: DepartmentModelType) => {
	dialogTitle.value = '编辑部门'
	formItems.forEach(it => {
		const propName = (item as any)[it.name]
		if (propName) {
			if (it.name === 'depCode') {
				it.value = propName.replace(DP_CODE_FLAG, '')
			} else {
				it.value = propName
			}
		}
	})
	parentFormItem.value = item.parentId

	depCodeFormItem.disabled = true
	dialog.value?.show(() => {
		if (!baseForm.value?.checkParams()) {
			return
		}
		;(dialog.value as any).loading = true
		setTimeout(() => {
			ElMessage.success('模拟修改成功，添加参数为：' + JSON.stringify(baseForm.value?.generatorParams()))
			dialog.value?.close()
		}, 3000)
	})
}
const doRefresh = () => {
	post({
		url: getInterview,
		data: interview.value?.withPageInfoData()
	}).then((result: any) => {
		dataList.value = result.data.list
		interview.value?.setTotalSize(result.data.totalSize)
	})
}
function filterItems(srcArray: Array<DepartmentModelType>, filterItem: DepartmentModelType) {
	for (let index = 0; index < srcArray.length; index++) {
		const element = srcArray[index]
		if (element.id === filterItem.id) {
			if (!_.isEmpty(element.children)) {
				ElMessage.error('当前部门下有子部门，不能删除')
				return
			}
			srcArray.splice(index, 1)
			return
		} else {
			if (!_.isEmpty(element.children)) {
				filterItems(element.children, filterItem)
			}
		}
	}
}
const onDeleteItem = (item: any) => {
	ElMessageBox.confirm('确定要删除此信息，删除后不可恢复？', '提示')
		.then(() => {
			if (dataList.value) {
				filterItems(dataList.value, item)
			}
		})
		.catch(console.log)
}

//添加题
const onAddItem = () => {
	dialogTitle.value = '添加内容'
	titleVal.value = ''
	contentVal.value = ''
	dialog.value?.show(async () => {
		const result = await post({
			url: InterviewTable,
			data: {
				titleVal: titleVal.value,
				contentVal: contentVal.value
			}
		})
		ElMessage.success(`${result.msg}`)
		doRefresh()
		dialog.value?.close()
	})
}
parentFormItem.selectOptions = computed(() => {
	return dataList.value?.map((it: any) => {
		return {
			label: it.name,
			value: it.id
		}
	})
})
onMounted(doRefresh)
</script>

<style scoped lang="scss">
.scroll-container {
	//   height: 200px; /* 指定容器高度 */
	overflow-y: auto;
	/* 显示垂直滚动条 */
}

/* 滚动条样式 */
::-webkit-scrollbar {
	width: 8px;
	background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.2);
}
</style>
